<template>
	<view>
		<!-- <view class="ek-cates acea-row">
      <view :class="{active: '' == cid}" class="item"
            @click="onChangeCate({id: ''})">全部
      </view>
      <view v-for="(item, index) in cateList" :key="index" :class="{active: item.id == cid}" class="item"
            @click="onChangeCate(item)">{{ item.title }}
      </view>
    </view> -->
		<view class="notification-box">
			<image src="../../../static/2images/icon_notification.png" mode=""></image>
			<view class="noti-boxs">
				<view class="noti-box">
					<text class="notification-text" v-for="(item,index) in articeList" :key="index" @click="goDetail(item)">{{item.title}}</text>
				</view>
			</view>
			
		</view>
		<view class="ek-title">
			<view class="text">热门演出</view>
			<view class="bg"></view>
		</view>

		<view class="">
			<view v-for="(item, index) in dataList" :key="index" class="ek-activity-item" @click="onItemClick(item)">
				<view class="picture">
					<image class="image" :src="item.thumb" mode="widthFix"></image>
				</view>
				<view class="info-box">
					<view class="top_info">
						<view class="activity-item-title">{{ item.title }}</view>
						<!-- <view class="activity-item-time" v-if="item.type == '1'">{{ item.start_time | formatDate }} </view> -->
						<view class="activity-item-time" v-if="item.type == '2' && item.is_open=='1'">{{ item.show_date }}</view>
					</view>
					<view class="activity-item-footer">
						<view class="activity-item-desc">
							<text class="acttity-item-p-unit">￥</text>
							<text class="acttity-item-price">{{ item.price_min!=null?item.price_min:'0.0' }}-{{item.price_max!=null?item.price_max:'0.0'}}</text>
						</view>
						<template v-if="item.type == 1">
							<view class="activity-item-xp" v-if="item.is_open == '1'">
								在线选座
							</view>
							<view class="activity-item-isNot" v-if="item.is_open == '0'">
								暂未开放
							</view>
						</template>
						<template v-else>
							<view class="activity-item-xp" v-if="item.is_open == '1'">
								在线预约
							</view>
							<view class="activity-item-isNot" v-if="item.is_open == '0'">
								暂未开放
							</view>
						</template>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataList from "@/mixins/dataList";
	import {
		performCategoryList,
		performArticeList
	} from "@/api/2_activity";
	
	import {
		showList
	} from "@/api/show";
	import {
		str2arr
	} from "@/utils";

	export default {
		mixins: [dataList],
		data() {
			return {
				cateList: [],
				articeList:[],
				cid: ''
			};
		},
		filters: {
			banner(val) {
				return str2arr(val)[0]
			}
		},
		computed:{
			getText(){
				let str = ''
				if(this.articeList.length>0){
					this.articeList.map(item=>{
						str = str+item.title
					})
				}
				
				return str
			}
		},
		onLoad() {
			this.getPerformArticeList();
			this.loadData();
			/*
			performCategoryList().then(res => {
				this.cateList = res.data
				// if (this.cateList.length) {
				//   this.cid = this.cateList[0].id
				//   this.setDataListPar({
				//     cid: this.cid
				//   })
				//
				// }

			})
			*/
		},
		methods: {
			loadData(){
				showList().then(res => {
					this.dataList = res.data.list;
				
				})
			},
			goDetail(item){
				uni.navigateTo({
					url:`/pages/news_details/index?id=${item.article_id}`
				})
			},
			getPerformArticeList(){
				performArticeList().then(res=>{
					this.articeList =res.data.list
				})
			},
			onChangeCate(item) {
				this.cid = item.id
				this.resetDataList()
				this.setDataListPar({
					cid: this.cid
				})
				this.getDataList()
			},
			onItemClick(item) {
				if(item.type ==2){
					uni.navigateTo({
						url: `/pages/2_development/show_buy_ticket/details?id=${item.id}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/2_development/show_buy_ticket/show_detail?id=${item.id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../user/style.scss";

	.notification-box {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #fff;
		padding:  0 32rpx;
		box-sizing: border-box;
		 overflow: hidden;
		image {
			width: 38rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}
		.noti-boxs{
			flex: 1;
			overflow: hidden; //（超出隐藏）
		}
		.noti-box{
			animation: 10s div linear infinite normal;
			width: 100%;
		}
		text {
			display: inline-block;
			white-space: nowrap;
			margin-right: 50rpx;
			
			// &:hover {
			// 	animation: 10s div linear infinite normal paused;

			// }
		}

	}

	@keyframes div {

		//起始位置
		0% {
			transform: translateX(110%);
			-webkit-transform: translateX(110%);
		}

		//终点位置
		100% {
			transform: translateX(-110%);
			-webkit-transform: translateX(-110%);
		}
	}


	page {
		background: #f8f8f8;
	}
</style>
